<template>
  <div>
    <template v-for="item in uploadedList">
      <span style="margin-right: 8px;"><a @click="download(item)">{{ item.name || '--'}}</a></span>
      <a style="margin-right: 40px;padding:0"
                @click="uploadedList.splice(uploadedList.findIndex(f => item.id === f.id), 1)" v-if="!readOnly">
        <a-tooltip :title="$t('delete')"><a-icon type="close"/></a-tooltip>
      </a>
      <span v-else style="padding-left: 20px"/>
    </template>
    <a-button @click="()=>{$refs.localUpload.uploadDo();$emit('select')}" v-if="!readOnly && uploadedList.length < maxSize">上传</a-button>
    <local-upload
      ref="localUpload"
      :domView="false"
      :loadData="currentFileInfo"
      :accept="accept"
      :size="maxSize"
      @showFileObj="uploadFile"
    />
  </div>
</template>
<script>
  import LocalUpload from '@/components/Upload/LocalUpload'
  import fileApi from "@api/modules/system/fileUpload";
  import {downloadBlobFile} from "@/utils/functions";

  /**
   * 文件上传：
   * 上传到文件服务器，选项：
   * value：绑定已上传文件数据: [{id:1, name:'1.txt'}]
   * accept: 可选文件类型
   * maxSize： 最大文件大小
   * maxCount： 最大数量
   * uploadType： 上传方式，0初始化文件 1本地 2FTP 6腾讯云 7阿里云 8华为云，默认 8 华为云
   */
  export default {
    name: 'fileUploader',
    components: {
      LocalUpload,
    },
    props: {
      value:{
        type: Array,
        default : () => {
          return []
        }
      },
      readOnly:{
        type: Boolean,
        default : () => {
          return false
        }
      },
      // 接受类型
      accept: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 限制文件大小
      maxSize: {
        type: Number,
        default: 100 * 1024 * 1024
      },
      //文件数量
      maxCount: {
        type: Number,
        default: 10
      },
      //上传方式：默认华为云
      uploadType: {
        type: Number,
        default: 1
      }
    },
    model: {
      prop: "value", //绑定的值，通过父组件传递
      event: "change" //自定义事件名
    },
    computed: {
      uploadedList:{
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('change', val);    // 触发
        }
      }
    },
    data() {
      return {
        currentFileInfo: {},
      }
    },
    methods:{
      uploadFile(file){
        const fileData = new FormData()
        fileData.append('file', file)
        this.$api.uploadWholeFileToLocal(fileData, {
          hashAlgorithm: 1,//md5
          checksum: this.currentFileInfo.md5,
          uploadType: this.uploadType
        }).then(res => {
          // this.uploadedList = Object.assign(this.uploadedList, [{id: res.data, name: file.name}])
          //如果传入数组引用变化，直接push无法触发变化，通过 复制 强制触发变化
          this.uploadedList.push({id: res.data, name: file.name});
          this.$emit('change', this.uploadedList);    // 触发
          this.$message.success(this.$t('uploadedSuccessfully'))
        })
      },
      // 下载附件
      download (file) {
        this.downing = true
        fileApi.downloadFileToLocal({ id: file.id}).then((res) => {
          downloadBlobFile(res, file.name)
        }).finally(() => {
          this.downing = false
        })
      }
    },

  }
</script>